<template>
	<view class="">
		<uni-popup ref="createOrder" type="center" >
			<view class="popup-box" style="width: 400px;max-height:90vh;">
				<view class="row cut-border pl-15 pt-10 pb-10">
					<view class="col-auto">
						<view class="row">
							<view  class="popup-title" >确认订单</view>
						</view>
					</view>
					<view class="iconfont icon-close pointer popup-close-icon" @click="closePopup()"></view>
				</view>
				<scroll-view scroll-y="true" class=" bg-gray-shallow-more" style="height: calc(90vh - 130px);">
					<view class="pd-10" >
						<!-- 收货地址 -->
						<view class="bg-fff border-radius row pd-10 "  >
							<view class="iconfont icon-location" style="line-height: 45px;margin: auto 0px;"></view>
							<view class="col-auto pointer" v-if="useAddress.province_name && useAddress.province_name != ''" @click="addressShow = true">
								<view class=" ml-15 " >
									<view class="row  "   >
										<view class="c-secondary mr-5">{{useAddress.contact_name}}</view>
										<view class="c-secondary">{{useAddress.contact_mobile}}</view>
										<view class="tag tag-xs  ml-10 tag-secondary" v-if="useAddress.is_default == 1">默认</view>
									</view>
									<view  class="mt-5 t-bolder " style="font-size: 16px;color:#333;">{{useAddress.province_name}}{{useAddress.city_name}}{{useAddress.county_name}}{{useAddress.address}}</view>
								</view>
							</view>
							<view class="col-auto" v-else>
								<view class="row" style="line-height: 45px;">
									<view class="c-secondary ml-15 "  >暂无收货地址</view>
									<view class="ml-15 c-primary pointer" @click="$refs.address.openPopup()">新增</view>
								</view>
							</view>
							<view class="iconfont icon-right1 c-secondary" style="font-size: 12px;line-height: 45px;"></view>
						</view>
						
						<!-- 商品 -->
						<view class="bg-fff border-radius  pd-10 mt-10" v-for="(item,index) in list" v-if="item.sub.length != 0">
							<view class="row">
								<text class="iconfont icon-dianpu1 mr-5 c-danger" style="font-size: 18px;"></text>
								<image v-if="item.shop_header != ''" :src="item.shop_header" class="w-h-30" mode=""></image>
								<text class="">{{item.shop_name}}</text>
							</view>
							<view class="" v-for="(val,key) in item.sub" :key="key">
								<view class="row mt-5" >
									<image :src="val.supply_cover"  class="w-h-80 border-radius mr-10 pointer" @click="$fun.showImgs(val.supply_cover.split(','))"></image>
									<view class="col-auto">
										<view class="w-100 t-row-1 t-bolder" style="font-size: 16px;letter-spacing: 1px;">{{val.supply_name}}</view>
										<view class="row c-secondary mt-5 ">{{val.spec_name}}</view>
										<view class="row mt-10" @click="getCount(key,index)"> 
											<view class="c-danger t-xs" style="line-height: 25px;">￥</view>
											<view class="c-danger mr-5" style="font-size: 18px;">{{val.price}}</view>
											<view class="col-auto"></view>
											<gt-uni-number-box  class="number-box"  v-model="val.count" :step="1" :min="0" @change="changePrice" @isDelete="isDelete" ></gt-uni-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 支付方式 -->
					<view class="mt-10 bg-fff border-radius row  mg-10 pd-10">
						<view class="col-auto c-secondary">支付方式</view>
						<view class="mr-10">余额支付</view>
						<view class="iconfont icon-roundcheckfill c-success "></view>
					</view>
					
					<!-- 提交 -->
					<view class="bottom-nav ">
						<view class="row ">
							<view class="col-auto"></view>
							<view class="t-xs l-h-md">合计:</view>
							<view class="c-danger t-xs l-h-md">￥</view>
							<view class="mr-15 c-danger " style="font-size: 22px;line-height: 30px;">{{totalPrice}}</view>
							<view class="btn btn-sm btn-submit"  @click="create()">提交订单</view>
						</view>
					</view>
					
					<!-- 订单支付 -->
					<view class="info-popup"  v-if="pay == true" @click="pay = false">
						<view class="pay-popup-box bg-fff "  @click.stop="">
							<view class="iconfont icon-close pointer popup-close-icon" @click="pay = false"></view>
							<view class="row">
								<view class="input-title">支付金额</view>
								<view class="input-title">￥{{totalPrice}}</view>
							</view>
							<view class="row mt-10">
								<view class="input-title">支付密码</view>
								<view class="col-auto">
									<input class="input-line" password type="text" v-model="pay_pwd"  placeholder="支付密码" />
								</view>
							</view>
							<view class="t-center mt-30">
								<view class="btn "  @click="payOrder()">立即支付</view>
							</view>
						</view>
					</view>
					
					<!-- 选择收货地址弹窗 -->
					<view class="info-popup"  v-if="addressShow == true" @click="addressShow = false">
						<view class="info-popup-box bg-gray-shallow-more" style="padding: 0px;" @click.stop="">
							<view class=" c-secondary t-center pd-10 row">
								<view class="col-auto"></view>
								<view class="">请选择收货地址</view>
								<view class="col-auto">
									<view class="fr c-primary mr-15 pointer" @click="$refs.address.openPopup()">新增</view>
								</view>
							</view>
							<scroll-view scroll-y="true" style="height: 300px;">
								<view class="" style="padding-bottom: 30px;">
									<view class="pd-10 bg-fff cut-border pointer" v-if="addressList.length != 0" @click="selectAddress(addr)" v-for="(addr,addrIndex) in addressList" :key="addrIndex">
										<view class="row">
											<view class="c-secondary" >{{addr.contact_name}}</view>
											<view class="ml-10 c-secondary" >{{addr.contact_mobile}}</view>
											<view class="tag tag-xs ml-10 tag-secondary"  v-if="addr.is_default == 1">默认</view>
										</view>
										<view class="mt-5 t-bolder" style="font-size: 15px;color:#333;">{{addr.province_name}}{{addr.city_name}}{{addr.county_name}}{{addr.address}}</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- 新增收货地址 -->
					<gt-address ref="address" @change="createAddress"></gt-address>
				</scroll-view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:'gt-create-order',
		data(){
			return{
				list:[],
				totalPrice:0,
				addressShow:false,
				pay:false,
				addressList:[],
				copy:'',
				
				// 当前收货地址
				useAddress:{
					contact_name:'',
					contact_mobile:'',
					province_name:'',
					city_name:'',
					county_name:'',
					address:'',
					is_default:0
				},
				countIndex:'',
				countKey:'',
				pay_pwd:'',
				order_no:'',
				cart_list:[],
				cart_ids:''
			}
		},
		props:{
			
		},
		methods:{
			openPopup(e,arr){
				this.list = []
				let _this = this
				if(arr && arr.length != 0){
					this.cart_list = arr
				}
				this.selectChangeNum = false
				this.addressShow = false
				this.pay = false
				this.addressList = []
				this.list = e
				this.getDefaultAddress()
				this.calcTotalPrice()
				this.$refs.createOrder.open()
			},
		
			getCount(key,index){
				this.countIndex = index
				this.countKey = key
			},
			isDelete(){
				let _this = this
				uni.showModal({
					content:'是否移除此商品？',
					success: (res) => {
						if(res.confirm){
							_this.list[_this.countIndex].sub.splice(_this.countKey,1)
							_this.calcTotalPrice()
						}else if(res.cancel){
							_this.list[_this.countIndex].sub[_this.countKey].count = 1
							_this.calcTotalPrice()
						}
					}
				})
			},
			changePrice(e){
				let _this = this
				setTimeout(()=>{
					if(_this.countIndex !== '' && _this.countKey !== ''){
						if(e != 0){
							_this.list[_this.countIndex].sub[_this.countKey].count = e
							_this.calcTotalPrice()
						}
					}
				},50)
				
			},
			calcTotalPrice(){
				if(this.list != ''){
					let total_price = 0
					for(let i in this.list){
						let price = 0
						for(let a in this.list[i].sub){
							let item = this.list[i].sub[a]
							item.sub_amount = parseFloat(item.price) * item.count
							item.sub_money = parseFloat(item.price) * item.count
							price += item.sub_amount
						}
						this.list[i].order_amount = price
						this.list[i].order_money = price
						total_price +=this.list[i].order_amount
					}
					this.totalPrice = total_price
				}
			},
			
			// 提交订单
			create(){
				let buy_info = []
				for(let i in this.list){
					for(let a in this.list[i].sub){
						let item = this.list[i].sub[a];
						let items = {
							price_id:item.price_id,
							spec_name:item.spec_name,
							spec_price:item.price,
							spec_count:item.count
						}
						buy_info.push(items)
					}
				}
				let str = ''
				for(let s in buy_info){
					let items = buy_info[s]
					for(let b in this.cart_list){
						let item = this.cart_list[b]
						 if(items.price_id == item.price_id){
							 str += item.id+','
						 }
					}
				}
				this.cart_ids = str.substring(0,str.length-1)
				let _this = this
				this.$post({
					url: '/common/user-order/user-create',
					_this:this,
					data:{
						supply_info:JSON.stringify(buy_info),
						address_info:JSON.stringify(this.useAddress),
						pay_type:'balance',
						order_money:_this.totalPrice,
						cart_ids:this.cart_ids
					},
					fun(res){
						uni.hideLoading()
						if(res.order_no && res.msg){
							_this.order_no = res.order_no
							_this.pay = true
							_this.$emit('change')
						}else if(res.error){
							_this.$fun.showNotice(res)
						}
					}
				});
			},
			// 支付
			payOrder(){
				let _this = this
				if(this.pay_pwd == '') return false;
				this.$post({
					url: '/common/user-order/user-pay',
					_this:this,
					data:{
						order_nos:_this.order_no,
						pay_pwd:_this.pay_pwd,
						pay_type:'balance'
					},
					afterFun(res) {
						if (res.msg) {
							_this.pay_pwd = ''
							_this.closePopup()
							_this.$emit('successPay',true)
						}
					}
				});
			},
			// 默认地址 & 收货地址
			getDefaultAddress(){
				let _this = this;
				this.$get({
					url: '/common/user-address/user-list?status=1&is_default=1',
					afterFun(res) {
						if(res.list != ''){
							let region = res.list[0].region.split(' ')
							let obj = {
								contact_name:res.list[0].contact,
								contact_mobile:res.list[0].contact_mobile,
								province_name:region[0],
								city_name:region[1],
								county_name:region[2],
								address:res.list[0].address,
								is_default:1
							}
							_this.addressList.push(obj)
						}
						_this.getAddress()
					}
				});
			},
			getAddress(){
				let _this = this
				this.$get({
					url: '/common/user-address/user-list?status=1&is_default=0',
					afterFun(res) {
						if (res.list) {
							for(let i in res.list){
								let region = res.list[i].region.split(' ');
								let obj = {
									contact_name:res.list[i].contact,
									contact_mobile:res.list[i].contact_mobile,
									province_name:region[0],
									city_name:region[1],
									county_name:region[2],
									address:res.list[i].address,
									is_default:0
								};
								_this.addressList.push(obj);
							}
							if(_this.addressList.length != 0){
								_this.useAddress = _this.addressList[0];
							}
						}
					}
				});
			},
			// 选择地址
			selectAddress(e){
				this.useAddress = e
				this.addressShow = false
			},
			closePopup(){
				this.$refs.createOrder.close()
			},
			createAddress(e){
				this.useAddress = e
				this.addressList.push(e)
				this.$refs.address.closePopup()
			},
		}
	}
</script>

<style>
	.mt-5{
		margin-top: 5px;
	}
	.bottom-nav{
		position: fixed;
		bottom:calc(5vh + 33px);
		background-color: #FFFFFF;
		padding:10px;
		width:400px;
		border:8px;
		max-width: 90vw;
	}
	.btn-submit{
		border-radius: 50px;
		background-image: linear-gradient(to bottom right, #ffaa00, #ff5500);
		border:none;
	}
	.info-popup{
		height: calc(90vh - 130px);
		position: fixed;
		bottom:calc(5vh + 33px);
		background-color:rgba(0,0,0,0.3);
		width:400px;
		max-width: 90vw;
	}
	
	.info-popup-box{
		position: fixed;
		min-height:300px;
		bottom:calc(5vh + 33px);
		padding:10px 0px;
		width:400px;
		max-width: 90vw;
		border-top-left-radius:8px;
		border-top-right-radius:8px;
	}
	.pay-popup-box{
		position: fixed;
		padding:30px;
		width:350px;
		border-radius:8px;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
	}
	.number-box{
		transform: scale(0.7);
		margin:-5px -15px 0px -10px;
		height:25px;
		width: 90px;
	}
	
	
</style>
